//1、实现一个插件：挂载$router ==>实现install 方法
let Vue
class ZVueRouter {
    constructor(options) {
        this.$options = options
        //需要创建响应式的current属性
        Vue.util.defineReactive(this, 'current', '/')
        // this.current = '/'
        // 监听URL的变化
        window.addEventListener('hashchange', this.onHashChange.bind(this))
        window.addEventListener('load', this.onHashChange.bind(this))

        //创建一个路由映射表
        this.routeMap = {}
        options.routes.forEach(route => {
            this.routeMap[route.path] = route
        })
    }
    onHashChange() {
        console.log(window.location.hash)
        this.current = window.location.hash.slice(1)
    }
}
ZVueRouter.install = function (_Vue) {
    //保存构造函数，在ZVueRouter中使用
    Vue = _Vue
    //挂载$router
    // 怎么获取根实例中的router 选项 使用全局混入
    //
    Vue.mixin({
        //此处写的生命周期的钩子 会在所有组件中都执行一遍
        beforeCreate() {
            // console.log(this)
            // 确保根实例的时候才执行
            if (this.$options.router) {
                Vue.prototype.$router = this.$options.router
            }
        },
    })

    //任务2、实现两个全局组件router-link 和 router-view
    Vue.component('router-link', {
        props: {
            to: {
                type: String,
                required: true,
            },
        },
        render(h) {
            // 希望渲染出一个a 标签
            // h(tag,data,children)
            //<router-link to='/about'></router-link>
            //   console.log(this.$slots)
            return h('a', {
                attrs: {
                    href: "#" + this.to
                }
            }, this.$slots.default)
        },
    })

    Vue.component('router-view', {
        render(h) {
            // 获取path 对应的component
            // let component = null
            console.log(this)
            console.log('router-view this.$router', this.$router)
            // this.$router.$options.routes.forEach((route) => {
            //     if (route.path === this.$router.current) {
            //         component = route.component
            //     }
            // })
            // 以上这样写每次渲染都需要遍历找一遍 优化
            const {
                routeMap,
                current
            } = this.$router
            const component = routeMap[current].component || null;
            return h(component)
        },
    })
}
export default ZVueRouter